<template>
  <div class="point-book container">
    <div class="left">
      <div class="big-title">{{ moduleTitle }}</div>
      <div class="point-question">
        <Question
          v-for="item in topicList"
          :key="item.id"
          :question="item"
          :qType="item.question_type"
          :collected="topicCollected"
          :is_answered="answered"
          @collected="changeCollected"
        ></Question>
      </div>
      <Pagination
        @prev="handleTopicPrev"
        @next="handleTopicNext"
        @end="handleTopicEnd"
      ></Pagination>
    </div>
    <div class="right">
      <Sheet></Sheet>
    </div>
  </div>
</template>

<script>
import Question from '../components/question'
import Pagination from '../components/pagination'
import Sheet from '../components/sheet'
import { mapState, mapGetters } from 'vuex'
export default {
  components: {
    Question,
    Pagination,
    Sheet
  },
  data() {
    return {
      topicList: [],
      topicLoading: true
    }
  },
  computed: {
    ...mapState({
      moduleTitle: state => state.exercise.module_title,
      topicSum: state => state.exercise.topic_sum,
      topicRules: state => state.exercise.topic_rules,
      topicIndex: state => state.exercise.topic_index,
      topicId: state => state.exercise.topic_id,
      topicIsright: state => state.exercise.topic_is_right,
      topicCollected: state => state.exercise.topic_collected
    }),
    ...mapGetters({
      topicAnswer: 'exercise/topicAnswer',
      topicAnswered: 'exercise/topicAnswered'
    }),
    answered() {
      return this.topicAnswered == 1 && !this.topicLoading
    }
  },
  watch: {
    topicIndex() {
      this.getExamTopic(this.topicId)
    }
  },
  created() {
    this.getPointInfo(this.$route.query.id, this.$route.query.ids, this.$route.query.num)
  },
  methods: {
    // 获取知识点练习的基础信息
    getPointInfo(id, ids, num) {
      let _this = this
      _this.$api.getExamPointPracticeBasic(
        {
          module_id: id,
          point_ids: ids,
          topic_num: num
        },
        res => {
          const { data } = res
          _this.$store.dispatch('exercise/SET_POINT_INIT', {
            title: data.module_title,
            sum: data.topic_num,
            rules: data.rules
          })
          this.getExamTopic(this.topicId)
        }
      )
    },
    // 获取试题
    getExamTopic(id) {
      let _this = this
      _this.palyRef = ''
      _this.topicLoading = true
      _this.$api.getExamTopic(
        {
          topic_id: id,
          origin: 1
        },
        res => {
          _this.topicList = res.data
          _this.setTopicCollected()
          _this.setTopicCorrectAnswer()
          _this.$store.commit('exercise/SET_POINT_TOPIC_IS_RIGHT')
          _this.topicLoading = false
        }
      )
    },
    // 设置试题收藏默认状态
    setTopicCollected() {
      const topic = this.topicList.find(item => item.id == this.topicId)
      this.$store.commit('exercise/SET_POINT_TOPIC_COLLECTED', topic.collected)
    },
    // 切换收藏状态
    changeCollected() {
      let status = this.topicCollected == 1 ? 0 : 1
      this.$api.postExamTopicCollect(
        {
          topic_id: this.topicId.toString(),
          status: status
        },
        res => {
          this.$message.info(res.data)
          this.$store.commit('exercise/SET_POINT_TOPIC_COLLECTED', status)
        }
      )
    },
    // 设置当前试题的正确答案
    setTopicCorrectAnswer() {
      this.$store.commit('exercise/SET_POINT_CURRENT_CORRECT_ANSWER', this.topicList)
    },
    // 提交答案
    handleSubmitAnswer() {
      this.$store.commit('exercise/SET_POINT_TOPIC_STATUS')
      this.$store.commit('exercise/SET_POINT_TOPIC_IS_RIGHT')
      // 提交答案
      this.$api.getExamPointPricticeTopic({
        topic_level: 1,
        topic_id: this.topicId.toString(),
        is_right: this.topicIsright
      })
    },
    // 上一题
    async handleTopicPrev() {
      // 已经是第一题了
      if (this.topicIndex <= 0) return
      this.$store.commit('exercise/SET_POINT_PREV')
    },
    // 下一题
    async handleTopicNext() {
      // 已经最后一题了
      if (this.topicIndex + 1 >= this.topicSum) return
      // 如果未作答，提交答案
      if (this.topicAnswer.has_answered == 0) {
        await this.handleSubmitAnswer()
        if (this.topicIsright == 1) this.$store.commit('exercise/SET_POINT_NEXT')
      } else {
        this.$store.commit('exercise/SET_POINT_NEXT')
      }
    },
    // 最后一题
    async handleTopicEnd() {
      // 如果未作答，提交答案
      if (this.topicAnswer.has_answered == 0) {
        await this.handleSubmitAnswer()
      }
    }
  },
  destroyed() {
    // 销毁页面时初始化vuex的状态
    this.$store.commit('exercise/SET_TOPIC_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.point-book {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 10px;
  .left {
    width: 890px;
    background-color: #ffffff;
  }
  .big-title {
    padding: 18px 0;
    font-size: 15px;
    font-weight: 500;
    color: #303133;
    text-align: center;
    border-bottom: 1px solid $border-color-divider;
  }
  .point-question {
    padding: 5px 20px 20px;
  }
  .right {
    width: 300px;
    background-color: #ffffff;
  }
}
</style>
